<template>
  <div class="calendar-page">
    <el-calendar>
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template slot="dateCell" slot-scope="{data}">
        <p
          :class="data.isSelected ? 'is-selected' : ''"
        >{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}</p>
      </template>
    </el-calendar>
  </div>
</template>
<script>
import Vue from "vue";
import { Calendar } from "element-ui";
Vue.use(Calendar);
export default {
  name: "CalendarPage"
};
</script>
<style lang="less" scoped>
.calendar-page {
  height: 100%;
  padding: 10px;
  .is-selected {
    color: #1989fa;
  }
}
</style>